// 虚拟DOM树的VNODE 
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children
    }
}



function createElement(type, props, children) {
    return new Element(type, props, children);
}

function setAttr(node, key, value) {
    switch (key) {
        case 'value':
            if (node.tagName.toUpperCase() === 'INPUT' ||
                node.tagName.toUpperCase() === 'TEXTAREA') {
                node.value = value; // form
            } else {
                // 自定义属性  React props
                node.setAttribute(key, value)
            }
            break;
        case 'style':
            // 行内样式
            node.style.cssText = value;
            break;

    }
}

function render(eleObj) {// 虚拟DOM到真实DOM需要的节点对象
    let el = document.createElement(eleObj.type)
    for (let key in eleObj.props) {
        setAttr(el, key, eleObj.props[key]);
    }
    eleObj.children.forEach(child => {
        child = (child instanceof Element)
            ? render(child)
            : document.createTextNode(child)
            el.appendChild(child);
    })
    return el;
}

function renderDOM(el, target) {
    // ReactDOM
    target.appendChild(el)
}

export { createElement, render, renderDOM,setAttr }